<template>
  <div style="margin-top: 5px;">
    <titleBox text="网格实时动态" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding: 10px;border: 1px solid #11afc180;">
        <div class="top">
          <div class="top_item" @click="wgssztModalRefShow(1)">
            <div class="top_item_leftIcon"></div>
            <div class="top_item_name">待处理</div>
            <div class="top_item_num">{{ countData.dcl }}</div>
          </div>
          <div class="top_item" @click="wgssztModalRefShow(3)" style="margin: 0 2px;">
            <div class="top_item_leftIcon"></div>
            <div class="top_item_name">处理中</div>
            <div class="top_item_num">{{ countData.clz }}</div>
          </div>
          <div class="top_item" @click="wgssztModalRefShow(2)">
            <div class="top_item_leftIcon"></div>
            <div class="top_item_name">已处理</div>
            <div class="top_item_num">{{ countData.ycl }}</div>
          </div>
          <div class="top_item" @click="wgssztModalRefShow(4)" style="margin: 0 2px;">
            <div class="top_item_leftIcon"></div>
            <div class="top_item_name">已逾期</div>
            <div class="top_item_num">{{ countData.yyq }}</div>
          </div>
        </div>
        <mTableAuto v-if="valueData.length > 5" :titleData="titleData" :valueData="valueData" height="180px">
        </mTableAuto>
        <mTable v-else :titleData="titleData" :valueData="valueData"></mTable>
      </div>
    </div>

    <wgssztModal ref="wgssztModalRef" @rowClick="wgssztModalRowClick"></wgssztModal>
    <sjxqModal ref="sjxqModalRef" @close="sjxqModalClose"></sjxqModal>
  </div>
</template>
<script setup>
import $api from "@/utils/request.js"
import { ref, onMounted, nextTick } from "vue"
import titleBox from "../mConponents/titleBox.vue"
import mTable from "../mConponents/mTable.vue"
import mTableAuto from "../mConponents/mTableAuto.vue"
import wgssztModal from "../mConponents/modal/wgssztModal.vue"
import sjxqModal from "../mConponents/modal/sjxqModal.vue"

const wgssztModalRef = ref(null)
const sjxqModalRef = ref(null)

const wgssztModalRefShow = (e) => {
  wgssztModalRef.value.show(e)
}
const wgssztModalClose = () => {
  wgssztModalRef.value.close()
}
const wgssztModalRowClick = (e) => {
  wgssztModalRef.value.close()
  sjxqModalRef.value.show(e)
}
const sjxqModalClose = () => {
  // sjxqModalRef.value.close()
  wgssztModalRef.value.show()
}

const wgssdtDetailModalShow = () => {
  if (valueData.value.length > 0) {
    wgssztModalRef.value.close()
    sjxqModalRef.value.show(valueData.value[0])
  }
}
const wgssdtDetailModalClose = () => {
  sjxqModalRef.value.close()
  wgssztModalRef.value.show()
}

const content = ref(null)
const height = ref(0)
const show = ref(false)

onMounted(() => {
  getCount()
  getList()
})
const countData = ref({
  dcl: 0,
  ycl: 0,
  clz: 0,
  yyq: 0

})
const getCount = async () => {
  const res = await $api.get("/api/index/get_appeal_solve")
  if (res.code === 1) {
    res.data.forEach(e => {
      if (e.type === 1) {
        countData.value.dcl = e.value
      } else if (e.type === 2) {
        countData.value.ycl = e.value
      } else if (e.type === 3) {
        countData.value.clz = e.value
      } else if (e.type === 4) {
        countData.value.yyq = e.value
      }
    })
    nextTick(() => {
      height.value = content.value.offsetHeight
      // show.value = true
    })
  }
}

const getList = async () => {
  const res = await $api.get("/api/index/get_appeal_list")
  if (res.code === 1) {
    res.data.data.forEach(e => {
      if (e.is_solve === "1") {
        e.state = "待处理"
      } else if (e.is_solve === "2") {
        e.state = "已处理"
      } else if (e.is_solve === "3") {
        e.state = "处理中"
      } else if (e.is_solve === "4") {
        e.state = "已逾期"
      }
    })
    valueData.value = res.data.data
  }
}
const titleData = [
  {
    name: "内容",
    key: "content",
    align: true,
    style: {
      flex: 1,
      textAlign: "left"
    }
  },
  {
    name: "类型",
    key: "appear_type",
    style: {
      width: "70px"
    }
  },
  {
    name: "状态",
    key: "is_solve",
    style: {
      width: "50px"
    }
  },
  {
    name: "创建时间",
    key: "createtime",
    style: {
      width: "80px"
    }
  }
]
const valueData = ref([])
defineExpose({ wgssztModalRefShow, wgssztModalClose, wgssdtDetailModalShow, wgssdtDetailModalClose })
</script>
<style scoped lang="less">
.content {
  background-color: #001a1dcc;
  width: 330px;
  margin-top: 5px;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;

  .top {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;

    .top_item {
      flex: 1;
      padding: 3px 3px 3px 3px;
      display: flex;
      align-items: center;
      background: linear-gradient(90deg, rgba(158, 247, 255, 0.1) 0%, rgba(0, 238, 255, 0) 100%);
      border: 1px solid;
      border-image-source: linear-gradient(180deg, rgba(30, 121, 88, 0) 0%, #1E6579 100%);

      .top_item_name {
        font-size: 10px;
        color: rgba(213, 242, 255, 1);
        flex: 1;
      }

      .top_item_num {
        color: rgba(158, 247, 255, 1);
        font-weight: bold;
        font-size: 12px;
      }

      .top_item_leftIcon {
        background-image: url('/img/myimg/lefticon1.png');
        background-size: 17px 15px;
        width: 10px;
        height: 15px;
      }
    }
  }
}
</style>
